<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">


<h:head>
	<title>Listagem de Clientes</title>
</h:head>

<ui:composition template="/template/template.xhtml">
	<ui:define name="conteudo">
	<a4j:jsFunction name="trocarTipoPessoa" action="#{clienteController.trocaTipoPessoa()}"
			render="painelPrincipal" execute="@this" />
		<h:outputText value="Lista de Clientes"></h:outputText>
		<br />
		<br />
		
		<div>
		<h:form>
			<h:selectOneRadio value="#{clienteController.flgPessoaFisica}"
				required="true" onchange="trocarTipoPessoa();">
				<f:selectItem itemValue="true" itemLabel="Pessoa Física" />
				<f:selectItem itemValue="false" itemLabel="Pessoa Jurídica" />
			</h:selectOneRadio>
			
			<a4j:outputPanel id="painelPrincipal">
				<!-- Pessoa Fisica -->
				<a4j:outputPanel id="painelPessoaFisica" rendered="#{clienteController.flgPessoaFisica}">
				
					<rich:dataTable value="#{clienteController.listaClientePf}" var="cliente"
						id="tablePessoaFisica" rows="20" rowClasses="odd-row, even-row" styleClass="stable">
						<rich:column>
							<f:facet name="header">
								<h:outputText value="CPF" />
							</f:facet>
							<h:outputText value="#{cliente.cpf}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Nome" />
							</f:facet>
							<h:outputText value="#{cliente.nome}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="CNH" />
							</f:facet>
							<h:outputText value="#{cliente.numeroCNH}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Endereço " />
							</f:facet>
							<h:outputText value="#{cliente.endereco}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Telefone" />
							</f:facet>
							<h:outputText value="#{cliente.telefone}" />
						</rich:column>
					</rich:dataTable>
					
				</a4j:outputPanel>
				
				<!-- Pessoa Juridica -->
				<a4j:outputPanel id="painelPessoaJuridica" rendered="#{!clienteController.flgPessoaFisica}">
					
					<rich:dataTable value="#{clienteController.listaClientePj}" var="cliente"
						id="tablePessoaJuridica" rows="20" rowClasses="odd-row, even-row" styleClass="stable">
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Nome Fantasia" />
							</f:facet>
							<h:outputText value="#{cliente.nomeFantasia}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Razão Social" />
							</f:facet>
							<h:outputText value="#{cliente.razaoSocial}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="CNPJ" />
							</f:facet>
							<h:outputText value="#{cliente.cnpj}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Endereço " />
							</f:facet>
							<h:outputText value="#{cliente.endereco}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Telefone" />
							</f:facet>
							<h:outputText value="#{cliente.telefone}" />
						</rich:column>
					</rich:dataTable>
					
				</a4j:outputPanel>
				
				<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
				<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
				<rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
				<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" /> 
			</a4j:outputPanel>
	</h:form>
	</div>

	</ui:define>
</ui:composition>
</html>